<!DOCTYPE html>
<html xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        header a {
            text-decoration: none;
            color: #6c6c6c;

        }

        .el-table .el-table__cell {
            padding: 0;
        }

        .el-table .cell {
            white-space: nowrap; /*设置内容不换行*/
            text-overflow: ellipsis; /*有超出显示范围的文本时显示...*/
        }

        .p_img:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x偏移值 y偏移值 浓度(值越大越模糊) 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="100px" style="font-size: 18px">
            <div style="width: 1500px;margin: 0 auto">
                <img src="imgs/logo.jpg" style="width: 150px;vertical-align: middle" alt="">
                <a href="/">首页</a> <i class="el-icon-s-home"></i>
                <el-divider direction="vertical">
                </el-divider>
                <a href="">商家<i class="el-icon-cherry"></i>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">帮助</a> <i class="el-icon-phone"></i></a>
                <hr>
            </div>
        </el-header>
    </el-container>
    <template>
        <el-table
                :data="ordersArr"
                style="width: 100%">
            <el-table-column
                    label="订单ID"
                    width="100px">
                <template slot-scope="scope">
                    <i class="el-icon-s-order"></i>
                    <!--scope.row代表当前行对应数组中的对象-->
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户id"
                    width="100px">
                <template slot-scope="scope">
                    <i class="el-icon-user"></i>
                    <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品id"
                    width="100px">
                <template slot-scope="scope">
                    <i class="el-icon-goods"></i>
                    <span style="margin-left: 10px">{{ scope.row.itemId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="订单数量"
                    width="80px">
                <template slot-scope="scope">
                    <i class="el-icon-files"></i>
                    <span style="margin-left: 10px">{{ scope.row.orderNum }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="购买数量"
                    width="80px">
                <template slot-scope="scope">
                    <i class="el-icon-files"></i>
                    <span style="margin-left: 10px">{{ scope.row.num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="原价"
                    width="100px">
                <template slot-scope="scope">
                    <i class="el-icon-folder-delete"></i>
                    <span style="margin-left: 10px">{{ scope.row.oldTotal }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="总价"
                    width="100px">
                <template slot-scope="scope">
                    <i class="el-icon-folder-checked"></i>
                    <span style="margin-left: 10px">{{ scope.row.total}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="发货地址"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-s-promotion"></i>
                    <span style="margin-left: 10px">{{ scope.row.shipAddress}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="收货地址"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-s-promotion"></i>
                    <span style="margin-left: 10px">{{ scope.row.deliveryAddress}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="支付时间"
                    width="150">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.payTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="订单状态"
                    width="100">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    label="订单创立时间"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>

                    <span style="margin-left: 10px">{{ scope.row.sendTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
                <!--scope里面装着当前行所对应的对象信息
                scope.$index 得到当前行对应的对象在数组中的下标
                scope.row 得到当前行对应的对象
                   -->
                <template slot-scope="scope">
                    <el-popconfirm
                            title="您确定删除此订单吗?"
                            @confirm="ordersDelete(scope.$index, scope.row)"
                    >
                        <el-button slot="reference" size="mini"
                                   type="danger">删除
                        </el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
    </template>

    <a href="/" style="margin-left: 65px;color: #5FB878;top: 3px">继续购买</a>


    <a href="">
        <el-button style="margin-left: 1400px" type="success">去结算></el-button>
    </a>
    <hr>

    </template>
    <el-footer>
        <!--   <div style="height: 300px;width: auto; background-image: url('img/水果底栏.png')" >-->
        <!--<el-carousel height="450px">
            <el-carousel-item>
                <img src="img/水果底栏1.jpg" width="100%" height="100%" alt="">
            </el-carousel-item>
            <el-carousel-item>
                <img src="img/水果底栏.png" width="100%" height="100%" alt="">
            </el-carousel-item>
        </el-carousel>-->

        <div style="background-color: white;padding:30px 0;text-align: center;color: black">
            <p>Copyright © 山西果真好商城有限公司版权所有 晋ICP备123456789号-3 晋公网安备 1234567890号
            </p>
            <p>果真好商城WWW.GUOZHENHAO.CN 专注于各种水果销售</p>
        </div>
    </el-footer>


</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                ordersArr: [],
            }

        },
        methods: {
            ordersDelete(index, orders) {
                //发请求删除订单
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post("/orders/delete?id=" + orders.id).then(function () {
                    //删除数组中的元素  (删除位置,删除数量)
                    v.ordersArr.splice(index, 1);
                })
            }
        },
        created: function () {
            //发请求获取订单信息
            if (location.search.indexOf("id") != -1) {//包含wd代表显示搜索结果
                //根据地址栏中的wd搜索内容发出请求获取所有相关商品
                let id = location.search.split('=')[1];
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/orders/"+id).then(function (response) {
                    console.log(response);
                    v.ordersArr = response.data.data;
                })
            }
        }
    })
</script>
</html>
